<template>
	<vue-echart :options="option" class="mapChart" />
</template>
<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/map'
import 'echarts/lib/chart/scatter'
import 'echarts/lib/chart/effectScatter'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/visualMap'
import 'echarts/lib/component/geo'

import geoJson from './chinaMapJson'
import baseUrl from '../../plugin/url'
export default {
	components: {
		VueEchart: ECharts
	},
	data() {
		return {
			option: {},
			geoCoordMap: {},
			optionData: [],
			max: 2,
			min: 0
		}
	},
	created() {
		ECharts.registerMap('china', geoJson)
		this.addInitData()
		this.getValeues()
	},
	mounted() {
		this.getOptions()
	},
	methods: {
		getValeues() {
			let url = baseUrl + '/web/api/v1/ip/'
			this.$get(url).then(res => {
				console.log(res)
			})
		},
		addInitData() {
			this.geoCoordMap = {
				黑龙江省: [127.9688, 45.368],
				内蒙古自治区: [110.3467, 41.4899],
				吉林省: [125.8154, 44.2584],
				北京市: [116.4551, 40.2539],
				辽宁省: [123.1238, 42.1216],
				河北省: [114.4995, 38.1006],
				天津市: [117.4219, 39.4189],
				山西省: [112.3352, 37.9413],
				陕西省: [109.1162, 34.2004],
				甘肃省: [103.5901, 36.3043],
				宁夏回族自治区: [106.3586, 38.1775],
				青海省: [101.4038, 36.8207],
				新疆维吾尔自治区: [87.9236, 43.5883],
				西藏自治区: [91.11, 29.97],
				四川省: [103.9526, 30.7617],
				重庆市: [108.384366, 30.439702],
				山东省: [117.1582, 36.8701],
				河南省: [113.4668, 34.6234],
				江苏省: [118.8062, 31.9208],
				安徽省: [117.29, 32.0581],
				湖北省: [114.3896, 30.6628],
				浙江省: [119.5313, 29.8773],
				福建省: [119.4543, 25.9222],
				江西省: [116.0046, 28.6633],
				湖南省: [113.0823, 28.2568],
				贵州省: [106.6992, 26.7682],
				云南省: [102.9199, 25.4663],
				广东省: [113.12244, 23.009505],
				广西省: [108.479, 23.1152],
				海南省: [110.3893, 19.8516],
				上海市: [121.4648, 31.2891],
				台湾省: [121.5135, 25.0308],
				香港特别行政区: [114.08, 22.2],
				澳门特别行政区: [113.33, 22.13]
			}
			let url = baseUrl + '/web/api/v1/ip/'
			this.$get(url).then(res => {
				let maxList = []
				res.data.forEach(res => {
					this.optionData.push({
						name: res.province,
						value: res.value
					})
					maxList.push(res.value)
				})
				this.max = Math.max(...maxList)
				this.min = Math.min(...maxList)
			})
		},
		getOptions() {
			this.option = {
				tooltip: {
					trigger: 'item',
					formatter: function(params) {
						if (typeof params.value[2] == 'undefined') {
							return params.name + ' : ' + params.value
						} else {
							return params.name + ' : ' + params.value[2]
						}
					}
				},
				legend: {
					show: false
				},
				visualMap: {
					show: true,
					min: this.min,
					max: this.max,
					left: 'left',
					bottom: '10',
					itemHeight: 100,
					text: ['高', '低'],
					textStyle: {
						color: '#fff'
					},
					calculable: true,
					seriesIndex: [1],
					color: ['#f82352', '#ddd214', '#2051be']
				},
				geo: {
					map: 'china',
					show: true,
					roam: false,
					zoom: 1.2, // 放大倍数  默认是1
					// aspectScale: 1.2, //长宽比
					label: {
						normal: {
							show: false
						},
						emphasis: {
							show: false
						}
					},
					itemStyle: {
						normal: {
							areaColor: '#3a7fd5',
							borderColor: '#0a53e9', //线
							shadowColor: '#092f8f', //外发光
							shadowBlur: 20
						},
						emphasis: {
							areaColor: '#0a2dae' //悬浮区背景
						}
					}
				},
				series: [
					{
						symbolSize: 5,
						label: {
							normal: {
								formatter: '{b}',
								position: 'right',
								show: true
							},
							emphasis: {
								show: true
							}
						},
						itemStyle: {
							normal: {
								color: '#fff'
							}
						},
						name: 'light',
						type: 'scatter',
						coordinateSystem: 'geo',
						data: this.convertData(this.optionData)
					},
					{
						type: 'map',
						map: 'china',
						geoIndex: 0,
						aspectScale: 0.75, //长宽比
						showLegendSymbol: false, // 存在legend时显示
						label: {
							normal: {
								show: false
							},
							emphasis: {
								show: false,
								textStyle: {
									color: '#fff'
								}
							}
						},
						roam: true,
						itemStyle: {
							normal: {
								areaColor: '#031525',
								borderColor: '#FFFFFF'
							},
							emphasis: {
								areaColor: '#2B91B7'
							}
						},
						animation: false,
						data: this.optionData
					}
				]
			}
		},
		convertData(data) {
			var res = []
			for (let i = 0; i < data.length; i++) {
				let geoCoord = this.geoCoordMap[data[i].name]
				if (geoCoord) {
					res.push({
						name: data[i].name,
						value: geoCoord.concat(data[i].value)
					})
				}
			}
			return res
		}
	}
}
</script>
<style lang="less" scoped>
.mapChart {
	width: 100%;
	height: 100%;
}
</style>
